<template>
  <div>
    <my-header></my-header>
    <!-- 自营商城 -->
    <div class="wrap">
      <!-- 1 -->
      <div class="choose clearfixed">
        <!-- 分类 -->
        <div class="choose-class">
          <span>分类</span>
          <ul>
            <li><a href="#">PP</a></li>
            <li><a href="#">PE</a></li>
            <li><a href="#">PVC</a></li>
            <li><a href="#">ABS</a></li>
            <li><a href="#">PS</a></li>
            <li><a href="#">AS</a></li>
            <li><a href="#">PA</a></li>
            <li><a href="#">PC</a></li>
            <li><a href="#">茂金属</a></li>
            <li><a href="#">EAA</a></li>
            <li><a href="#">塑料制品</a></li>
          </ul>
        </div>

        <!-- 厂家 -->
        <div class="choose-class">
          <span>厂家</span>
          <ul>
            <li><a href="#">上海石化</a></li>
            <li><a href="#">上海赛科</a></li>
            <li><a href="#">东华能源</a></li>
            <li><a href="#">伊朗石化</a></li>
            <li><a href="#">中煤榆林</a></li>
            <li><a href="#">天津石化</a></li>
          </ul>
          <a href="#" class="choose-more">更多<p class="el-icon-arrow-down"></p></a>
        </div>

        <!-- 交货地 -->
        <div class="choose-class">
          <span>交货地</span>
          <ul>
            <li><a href="#">山东青岛</a></li>
            <li><a href="#">上海市</a></li>
            <li><a href="#">东莞市</a></li>
            <li><a href="#">广州市</a></li>
            <li><a href="#">日照市</a></li>
            <li><a href="#">龙口市</a></li>
            <li><a href="#">天津市</a></li>
            <li><a href="#">宁波市</a></li>
            <li><a href="#">成都市</a></li>
            <li><a href="#">桂林市</a></li>
            <li><a href="#">佛山市</a></li>
            <li><a href="#">北京市</a></li>
          </ul>
          <a href="#" class="choose-more">更多<p class="el-icon-arrow-down"></p></a>
        </div>

        <!-- 筛选条件 -->
        <div class="choose-terms">
          <span>筛选条件</span>
          <ul>
            <li><a href="#">全部结果<p class="el-icon-arrow-right"></p></a></li>
          </ul>
        </div>

        <!-- 搜索，分页(未完) -->
        <div class="choose-paging clearfixed">
            <div class="paging-search">
              <span>关键字</span>
              <input type="text" placeholder="请输入牌号关键字搜索">
            </div>

            <div class="paging-search">
              <span>交货方式</span>
              <!-- 未完 -->
              <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">
              </el-cascader>
            </div>

            <div class="paging-btn">
              <span>1</span>/<span>40</span>
              <el-button-group>
                <el-button type="primary"><i class="el-icon-arrow-left"></i></el-button>
                <el-button type="primary"><i class="el-icon-arrow-right"></i></el-button>
              </el-button-group>
            </div>
            
        </div>

      </div>

      <!-- 2 -->
      <div class="sort clearfixed">
          
      </div>

    </div>

    <my-footer></my-footer>
  </div>
</template>

<script>

export default {
  name: 'autotrophy',
  data () {
    return {
     options:[{
       value: 'quanbu',
       label: '全部'
     },{
       value: 'peisong',
       label: '配送'
     },{
       value: 'quanbu',
      label: '自提'
     }]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import 'src/assets/scss/autotrophy';

.el-button{
  color:#e6e6e6;
  background: #fff;
  border: 1px solid #e6e6e6;
}
.el-cascader{
  width: 78px;
	height: 31px;
}


</style>
